<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="rankChart" content="width=device-width, initial-scale=1.0">
    <title>AQI Rank Chart</title>
    <!-- 引入 ECharts 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.0/echarts.min.js"></script>
    <script src="js/Plugin/jquery-3.3.1.min.js"></script>
</head>

<body>

    <!-- 用于显示图表的容器 -->
    <div id="rankChart" style="width: 100%; height: 550%;"></div>

    <script>
        // 初始化图表
        var myChart = echarts.init(document.getElementById("rankChart"), "shine");

        // 更新图表数据
        function updateChart() {
            const rankChartOpt = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    },
                    formatter: function (params) {
                        const param = params[0];
                        const marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#e6b600;"></span>';
                        const suffix = '<span style="margin-left:5px;font-size:12px;">%</span>';
                        return param.name + "<br />" +
                            marker + "排名：" + (param.dataIndex + 1) + "<br />" +
                            marker + "污染物占比：" + param.value + suffix;
                    }
                },
                grid: {
                    top: 10,
                    bottom: 10,
                    left: 60
                },
                xAxis: {
                    show: false,
                    type: "value"
                },
                yAxis: {
                    type: "category",
                    inverse: true,
                    axisLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: {
                        fontSize: 12,
                        color: "#0d256e"
                    }
                },
                series: [{
                    name: "污染物排名",
                    type: "bar",
                    barCategoryGap: "60%",
                    label: {
                        show: true,
                        position: "right",
                        fontSize: 12,
                        color: "#04375e",
                        emphasis: {
                            color: "#a48204"
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 1, 1, 1,
                                [
                                    { offset: 0, color: '#b0c2f9' },
                                    { offset: 0.5, color: '#188df0' },
                                    { offset: 1, color: '#185bff' }
                                ]
                            )
                        },
                        emphasis: {
                            color: new echarts.graphic.LinearGradient(
                                0, 1, 1, 1,
                                [
                                    { offset: 0, color: '#b0c2f9' },
                                    { offset: 0.7, color: '#e6b600' },
                                    { offset: 1, color: '#ceac09' }
                                ]
                            )
                        }
                    }
                }]
            };
            myChart.setOption(rankChartOpt);
            $.ajax({
                url: "data/ranking-list.json",
                dataType: "json"
            }).done(function () {
                $("#rankChart").addClass("chart-done");
            }).done(function (data) {
                //     console.log('Data: ', data);
                const xData = [];
                const yData = [];
                for (let i in data) {
                    xData.push(data[i].market_capitalization);
                    yData.push(data[i].stock_name);
                }
                myChart.setOption({
                    yAxis: {
                        data: yData
                    },
                    series: [{
                        name: "污染物占比",
                        data: xData
                    }]
                });
            }).fail(function (jqXHR) {
                console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText);
            });
        }

        // 初次加载图表
        updateChart();
    </script>
</body>

</html>